<!--
 * @Description: 代码预览
 * @Author: DHL
 * @Date: 2021-12-24 17:24:41
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-08 14:08:31
-->
<template>
  <!-- <div class="code-preview-wrapper-tools">
    <el-button type="warning" @click="handleDownloadZip">下载ZIP</el-button>
    <el-button type="primary" @click="handleDownloadFile">下载</el-button>
  </div> -->

  <div class="code-preview-wrapper">
    <div class="code-preview-nav-wrapper">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
          :default-openeds="['java']"
          :default-active="state.activeMenu"
        >
          <el-sub-menu index="java">
            <template #title>
              <span>Java</span>
            </template>
            <el-menu-item-group title="Entity">
              <el-menu-item index="Bean" @click="handleMenuItemClick('Bean')">Bean</el-menu-item>
              <el-menu-item index="SearchVo" @click="handleMenuItemClick('SearchVo')">
                SearchVo
              </el-menu-item>
              <el-menu-item index="SaveVo" @click="handleMenuItemClick('SaveVo')">
                SaveVo
              </el-menu-item>
              <el-menu-item index="UpdateByIdVo" @click="handleMenuItemClick('UpdateByIdVo')">
                UpdateByIdVo
              </el-menu-item>
              <el-menu-item index="BeanDto" @click="handleMenuItemClick('BeanDto')">
                BeanDto
              </el-menu-item>
              <el-menu-item index="SearchDto" @click="handleMenuItemClick('SearchDto')">
                SearchDto
              </el-menu-item>
              <el-menu-item index="GetByIdDto" @click="handleMenuItemClick('GetByIdDto')">
                GetByIdDto
              </el-menu-item>
              <!-- <el-menu-item index="ExportExcelDto" @click="handleMenuItemClick('ExportExcelDto')">
                ExportExcelDto
              </el-menu-item> -->
            </el-menu-item-group>
            <el-menu-item-group title="Controller">
              <el-menu-item index="Controller" @click="handleMenuItemClick('Controller')">
                Controller
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Service">
              <el-menu-item index="IService" @click="handleMenuItemClick('IService')">
                IService
              </el-menu-item>
              <el-menu-item index="Service" @click="handleMenuItemClick('Service')">
                Service
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Mapper">
              <el-menu-item index="Mapper" @click="handleMenuItemClick('Mapper')">
                Mapper
              </el-menu-item>
              <el-menu-item index="MapperXml" @click="handleMenuItemClick('MapperXml')">
                MapperXml
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="Vue">
            <template #title>
              <span>Vue</span>
            </template>
            <el-menu-item-group title="Vue">
              <el-menu-item index="index" @click="handleMenuItemClick('index')">
                index
              </el-menu-item>
              <el-menu-item index="form" @click="handleMenuItemClick('form')">form</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Typescript">
              <el-menu-item index="useIndex" @click="handleMenuItemClick('useIndex')">
                useIndex
              </el-menu-item>
              <el-menu-item index="useForm" @click="handleMenuItemClick('useForm')">
                useForm
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Api">
              <el-menu-item index="model" @click="handleMenuItemClick('model')">
                model
              </el-menu-item>
              <el-menu-item index="api" @click="handleMenuItemClick('api')">api</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="Sql">
            <template #title>
              <span>Sql</span>
            </template>
            <el-menu-item index="sql" @click="handleMenuItemClick('sql')">Sql</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="code-monaco-wrapper">
      <div ref="codeMonacoRef" class="tw-code-monaco"></div>
    </div>
  </div>
</template>

<script src="./usePreview.ts"></script>

<style scoped lang="scss">
  .code-preview-wrapper-tools {
    text-align: right;
    margin: 10px;
  }
  .code-preview-wrapper {
    display: flex;
    height: 100%;

    .code-preview-nav-wrapper {
      height: 100%;
      width: 200px;
      .scrollbar-wrapper {
        overflow-x: hidden;
      }

      .el-scrollbar {
        height: 100%;
      }
      .el-scrollbar__view {
        height: 100%;
      }

      .el-menu-item-group {
        background-color: #545c64;
      }
      .el-menu-item {
        background-color: #545c64;

        &:hover {
          background-color: rgb(67, 74, 80) !important;
        }
      }
    }

    .code-monaco-wrapper {
      padding-left: 3px;
      width: calc(100% - 203px);
      height: 100%;

      .tw-code-monaco {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
